<template>
	<view>
		<u-form :model="form" ref="uForm" label-width='150' class="mailForm" :error-type="['message']" :label-style="labelStyle">
			<!-- 单号 -->
			<u-form-item label="单号" prop='number' required>
				<u-input :border="true" v-model="form.number" placeholder="" :trim="true" />
				<u-button @click="scan" style="margin-left: 10rpx;">扫描</u-button>
			</u-form-item>
			<u-form-item label="老挝发中国" prop='sendType'>
				<u-radio-group v-model="form.sendType">
					<u-radio :name="1">是</u-radio>
					<u-radio :name="0">否</u-radio>
				</u-radio-group>
			</u-form-item>

			<!-- 寄件人 -->
			<u-form-item label="寄件人姓名" prop='senderName' required>
				<input-search-start v-model="form.senderName" :that="this" />
			</u-form-item>
			<u-form-item label="寄件人姓名" prop='laosSenderName' required>
				<u-input :border="true" v-model="form.laosSenderName" placeholder="老挝" />
			</u-form-item>
			<u-form-item label="始发地" prop='beginPlace' required>
				<u-input :border="true" v-model="form.beginPlace" placeholder="中文" />
			</u-form-item>
			<u-form-item label="始发地" prop='laosBeginPlace' required>
				<u-input :border="true" v-model="form.laosBeginPlace" placeholder="老挝" />
			</u-form-item>
			<u-form-item label="单位名称" prop='senderCompanyName'>
				<u-input :border="true" v-model="form.senderCompanyName" placeholder="中文" />
			</u-form-item>
			<u-form-item label="单位名称" prop='laosSenderCompanyName'>
				<u-input :border="true" v-model="form.laosSenderCompanyName" placeholder="老挝" />
			</u-form-item>
			<u-form-item label="寄件人详细地址" prop='senderAddress' required>
				<u-input :border="true" v-model="form.senderAddress" placeholder="中文" />
			</u-form-item>
			<u-form-item label="寄件人详细地址" prop='laosSenderAddress' required>
				<u-input :border="true" v-model="form.laosSenderAddress" placeholder="老挝" />
			</u-form-item>
			<u-form-item label="寄件人联系电话" prop='senderPhone' required>
				<u-input :border="true" v-model="form.senderPhone" placeholder="" />
			</u-form-item>
			<u-form-item label="寄件人证件号" prop='senderId' required>
				<u-input :border="true" v-model="form.senderId" placeholder="" />
			</u-form-item>

			<!-- 收件人 -->
			<u-form-item label="收件人姓名" prop='receiverName' required>
				<input-search-end v-model="form.receiverName" :that="this" />
			</u-form-item>
			<u-form-item label="收件人姓名" prop='laosReceiverName' required>
				<u-input :border="true" v-model="form.laosReceiverName" placeholder="老挝" />
			</u-form-item>
			<u-form-item label="目的地" prop='endPlace' required>
				<u-input :border="true" v-model="form.endPlace" placeholder="中文" />
			</u-form-item>
			<u-form-item label="目的地" prop='laosEndPlace' required>
				<u-input :border="true" v-model="form.laosEndPlace" placeholder="老挝" />
			</u-form-item>
			<u-form-item label="单位名称" prop='receiverCompanyName'>
				<u-input :border="true" v-model="form.receiverCompanyName" placeholder="中文" />
			</u-form-item>
			<u-form-item label="单位名称" prop='laosReceiverCompanyName'>
				<u-input :border="true" v-model="form.laosReceiverCompanyName" placeholder="老挝" />
			</u-form-item>
			<u-form-item label="收件人详细地址" prop='receiverAddress' required>
				<u-input :border="true" v-model="form.receiverAddress" placeholder="中文" />
			</u-form-item>
			<u-form-item label="收件人详细地址" prop='laosReceiverAddress' required>
				<u-input :border="true" v-model="form.laosReceiverAddress" placeholder="老挝" />
			</u-form-item>
			<u-form-item label="收件人联系电话" prop='receiverPhone' required>
				<u-input :border="true" v-model="form.receiverPhone" placeholder="" />
			</u-form-item>
			<u-form-item label="收件人证件号" prop='receiverId'>
				<u-input :border="true" v-model="form.receiverId" placeholder="" />
			</u-form-item>

			<!-- 物件类型 -->
			<u-form-item label="快递种类" prop='expressSort'>
				<u-radio-group v-model="form.expressSort">
					<u-radio :name="0">物品</u-radio>
					<u-radio :name="1">文件</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="保价" prop='isProtect'>
				<u-radio-group v-model="form.isProtect" @change="changeProtect">
					<u-radio :name="1">是</u-radio>
					<u-radio :name="0">否</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item v-if="form.isProtect" label=" " prop='protectWay'>
				<u-radio-group v-model="form.protectWay" @change="changeProtect">
					<u-radio :name="0">普通</u-radio>
					<u-radio :name="1">易碎品</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item v-if="form.isProtect" label="保额" prop='coverage' required>
				<u-number-box v-model="form.coverage" :min="0" :positive-integer="false" :step="0.1" :input-width="150" @change="changeProtect" />
			</u-form-item>
			<u-form-item v-if="form.isProtect" label="保价费" prop='protectFee' required>
				<u-number-box v-model="form.protectFee" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>
			<u-form-item label="报关费" prop='isCustomsFee'>
				<u-radio-group v-model="form.isCustomsFee" @change="changeIsCustoms">
					<u-radio :name="1">需要</u-radio>
					<u-radio :name="0">不需要</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item v-if="form.isCustomsFee" label="报关费金额" prop='customsFee' required>
				<u-number-box v-model="form.customsFee" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>

			<!-- 计算重量 -->
			<u-form-item label="计算重量">
				<u-row gutter="5">
					<u-col span="12">
						<u-number-box v-model="computeWeight.length" :min="0" @change="calculate" :input-width="150" /> 长(cm) *
					</u-col>
					<u-col span="12">
						<u-number-box v-model="computeWeight.width" :min="0" @change="calculate" :input-width="150" /> 宽(cm) *
					</u-col>
					<u-col span="12">
						<u-number-box v-model="computeWeight.height" :min="0" @change="calculate" :input-width="150" /> 高(cm) / {{$volume}}
					</u-col>
				</u-row>
			</u-form-item>

			<!-- 费用 -->
			<u-form-item label="重量" prop='weight' required>
				<u-number-box v-model="form.weight" :min="0" :positive-integer="false" :step="0.1" :input-width="300" @change="changeWeight" />
			</u-form-item>
			<u-form-item label="运费" prop='freight' required>
				<u-number-box v-model="form.freight" :min="0" :positive-integer="false" :step="0.1" :input-width="300" />
			</u-form-item>
			<u-form-item label="代收贷款" prop='loans'>
				<u-number-box v-model="form.loans" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>
			<u-form-item label="特殊区域费" prop='specialPlaceFee'>
				<u-number-box v-model="form.specialPlaceFee" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>
			<u-form-item label="包装费" prop='packFee'>
				<u-number-box v-model="form.packFee" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>
			<u-form-item label="总计" prop='totalFee'>
				<u-number-box v-model="form.totalFee" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>

			<!-- 分割线 -->
			<u-divider half-width="100%">------</u-divider>

			<!-- 品名选择 -->
			<u-form-item label="品名">
				<u-input :border="true" v-model="item" @click="itemDataShow = true" type="select" placeholder="请选择品名"></u-input>
				<u-select v-model="itemDataShow" mode="mutil-column-auto" value-name="name" label-name="name" :list="itemData"
				 @confirm="confirmItem" />
			</u-form-item>
			<!-- 品牌选择 -->
			<brand-input-select label="品牌" v-model="brand" @blur='getSpecifications' :candidates="brandOption" placeholder="请选择品牌" />
			<!-- 尺寸选择 -->
			<u-popup v-model="sizeListShow">
				<div v-for="item in size" :key="item.key" style="display: flex;justify-content: space-between;margin-bottom: 10rpx">
					<div style="margin-right: 60rpx;">{{item.value}}</div>
					<div>
						<u-button type="primary" @click="addSize(item.value)" size="mini">+</u-button>
						<u-button type="danger" @click="delSize(item.value)" size="mini">-</u-button>
					</div>
				</div>
			</u-popup>
			<u-form-item label="尺寸">
				<u-button block @click="sizeListShow = true">点击选择</u-button>
			</u-form-item>

			<!-- 海关信息 -->
			<u-form-item label="中文品名" prop='articleName'>
				<item-input-select v-model="form.articleName" ref='SearchSelectItem' placeholder="中文" :that="this"></item-input-select>
			</u-form-item>
			<u-form-item label="老挝品名" prop='laosArticleName'>
				<u-input :border="true" v-model="form.laosArticleName" placeholder="老挝" @blur="translateZhAndEn" />
			</u-form-item>
			<u-form-item label="英文品名" prop='enArticleName'>
				<u-input :border="true" v-model="form.enArticleName" placeholder="英文" />
			</u-form-item>
			<u-form-item label="税号" prop='dutyParagraph'>
				<u-input :border="true" v-model="form.dutyParagraph" placeholder="" />
			</u-form-item>
			<u-form-item label="规格型号" prop='specification'>
				<u-input :border="true" v-model="form.specification" placeholder="" />
			</u-form-item>
			<u-form-item label="毛重KG" prop='roughWeight'>
				<u-number-box v-model="form.roughWeight" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>
			<u-form-item label="净重KG" prop='netWeight'>
				<u-number-box v-model="form.netWeight" :min="0" :positive-integer="false" :step="0.1" :input-width="150" @change="getSpecifications" />
			</u-form-item>
			<u-form-item label="内件毛重KG" prop='insideRoughWeight'>
				<u-number-box v-model="form.insideRoughWeight" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>
			<u-form-item label="内件数量" prop='insideCount'>
				<u-number-box v-model="form.insideCount" :min='1' :input-width="100" :input-height="60" @change="getSpecifications"></u-number-box>
			</u-form-item>
			<u-form-item label="申报单价" prop='declarationUnitFee'>
				<u-number-box v-model="form.declarationUnitFee" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>
			<u-form-item label="申报总价" prop='declarationTotalFee'>
				<u-number-box v-model="form.declarationTotalFee" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>
			<u-form-item label="计量单位" prop='measureUnit'>
				<u-input :border="true" v-model="form.measureUnit" placeholder="" />
			</u-form-item>
			<u-form-item label="税率:" prop='taxRate'>
				<u-number-box v-model="form.taxRate" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>
			<u-form-item label="应收税额:" prop='receivableTax'>
				<u-number-box v-model="form.receivableTax" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>
			<u-form-item label="实收税额:" prop='realTax'>
				<u-number-box v-model="form.realTax" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>
			<u-form-item label="补收税额:" prop='repairTax'>
				<u-number-box v-model="form.repairTax" :min="0" :positive-integer="false" :step="0.1" :input-width="150" />
			</u-form-item>
			<u-form-item label="发件人城市" prop='senderCity'>
				<u-input :border="true" v-model="form.senderCity" placeholder="" />
			</u-form-item>
			<u-form-item label="英文发件人城市" prop='enSenderCity'>
				<u-input :border="true" v-model="form.enSenderCity" placeholder="" />
			</u-form-item>
			<u-form-item label="英文发件人" prop='enSenderName'>
				<u-input :border="true" v-model="form.enSenderName" placeholder="" />
			</u-form-item>
			<u-form-item label="英文发件人地址" prop='enSenderAddress'>
				<u-input :border="true" v-model="form.enSenderAddress" placeholder="" />
			</u-form-item>
			<u-form-item label="收件人城市" prop='receiverCity'>
				<u-input :border="true" v-model="form.receiverCity" placeholder="" />
			</u-form-item>
			<u-form-item label="产销城市" prop='saleCity'>
				<u-input :border="true" v-model="form.saleCity" placeholder="" />
			</u-form-item>
			<u-form-item label="发件人国别" prop='senderCountry'>
				<u-input :border="true" v-model="form.senderCountry" placeholder="" />
			</u-form-item>
			<u-form-item label="备注(内件明细)" prop='detailNotes'>
				<u-input :border="true" v-model="form.detailNotes" placeholder="" />
			</u-form-item>

			<!-- 分割线 -->
			<u-divider half-width="100%">------</u-divider>

			<!-- 物流信息 -->
			<u-form-item label="备注" prop='notes'>
				<u-input :border="true" v-model="form.notes" placeholder="中文" />
			</u-form-item>
			<u-form-item label="备注" prop='laosNotes'>
				<u-input :border="true" v-model="form.laosNotes" placeholder="老挝" />
			</u-form-item>
			<u-form-item label="发往网点" prop='sendToUserId' required>
				<u-input :border="true" v-model="form.sendToName" @click="sendShow = true" type="select" placeholder="" />
				<u-picker @confirm="selectSend" mode="selector" v-model="sendShow" title="发往网点" :mask-close-able="true" :range="sendSite"
				 range-key="name"></u-picker>
			</u-form-item>
		</u-form>

		<!-- 提交 -->
		<view class="submitBtn">
			<u-button @click='submit' type="warning" throttleTime="500" hoverStayTime="100" :custom-style="submitBtnStyle" shape="circle"
			 :ripple="true">添加</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import InputSearchStart from '../components/InputSearchStart.vue';
	import InputSearchEnd from '../components/InputSearchEnd.vue';
	import BrandInputSelect from '../components/BrandInputSelect.vue';
	import ItemInputSelect from '../components/ItemInputSelect.vue';
	import METHOD from "../js/method.js";
	import FORM from "../js/form.js";
	import {
		resetForm
	} from "@/utils/common";

	export default {
		name: 'AddOrderCommon',
		mixins: [METHOD, FORM],
		components: {
			InputSearchStart,
			InputSearchEnd,
			BrandInputSelect,
			ItemInputSelect
		},
		data() {
			return {
				// 子单
				son: {
					hasSon: false,
					packTotal: 0,
					total: 0,
					childrenList: [{
						length: 0,
						width: 0,
						height: 0,
						packWay: '无包装',
						count: 1,
						key: 0
					}]
				},
				// 计算体积重量
				computeWeight: {
					length: 0,
					width: 0,
					height: 0
				},
				/* 选择品名 */
				item: '',
				itemDataShow: false,
				/* 品牌 */
				brand: '无品牌',
				brandOption: [],
				brandShow: false,
				/* 尺寸 */
				sizeListShow: false,
				sizeList: [],
				// 规格型号
				specification: '',
				/* 选择发往网点 */
				sendShow: false,
				sendSite: []
			}
		},
		mounted() {
			this.getAllSite();
			this.init();
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 获得网点各种信息
			getInfo() {
				this.$api.getCourierUsableApi().then(result => {
					if (result.status === 400) return
					let response = result.resultParam
					this.form.number = response.expressOrder.number;
				})
			},

			setCurrent() {
				this.form.currentUserId = this.site.id;
				this.form.currentUserName = this.site.username;
				this.form.currentName = this.site.name;
				this.form.laosCurrentName = this.site.laosName;
				this.form.beginPlace = this.site.address;
				this.form.laosBeginPlace = this.site.laosAddress;
			},

			// 初始化
			init() {
				this.getInfo();
				this.getAllSite();
			},

			// 重置
			cancel() {
				resetForm(this).then(() => {
					this.init()
				})
			}
		}
	}
</script>

<style lang="scss">
	.mailForm {
		padding-left: 16rpx;
		padding-right: 8rpx;
		background-color: #FFFFFF;
		border-top: rgb(230, 230, 230) solid 2rpx;
	}

	.submitBtn {
		height: 110rpx;
		flex-direction: column;
		z-index: 101;
		background: #FFFFFF;
		padding: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
